<template>
	<div class="classesSpace">
		<div class="classesInfo" v-loading="loading">
			<div class="tital">
				<h2>C{{ classesData.classesId }}&nbsp;&nbsp; {{ classesData.classesName }} </h2>
				<span class="editClasses" @click="editClasses">修改班级信息<i class="el-icon-edit"></i></span>
			</div>
			<div class="details">
				<ul>
					<li class="item"> <span class="key">创建时间：</span> {{ classesData.createDate }} </li>
					<li class="item"> <span class="key">创建者：</span> {{ classesData.creatorName }} </li>
					<li class="item"> <span class="key">班级人数：</span> {{ classesData.peopleNum }} 人 </li>
					<li class="item joinWay"> <span class="key">允许加入方式：</span> {{ classesData.joinWay | joinTayType }} </li>
				</ul>
				<div class="title" @click="isopenIntroduction=!isopenIntroduction">
					<span class="key">班级简介：</span>{{ classesData.introduction }}
				</div>
			</div>
		</div>
		<div class="tab-classes">
			<span :class="tab_classes=='test_list'?'active':''" @click="examList()">班级考试</span>
			<span :class="tab_classes=='user_list'?'active':''" @click="userList()">其他班级成员</span>
		</div>
		<!-- 班级考试信息表格 -->
		<div class="test_list table" v-if="tab_classes=='test_list'">
			<el-table :data="TestData" style="width: 100%" v-loading="loading">
				<el-table-column label="考试编号" width="110">
					<template slot-scope="scope">E{{scope.row.examId}} </template>
				</el-table-column>
				<el-table-column prop="examName" label="考试名称"> </el-table-column>
				<el-table-column label="考试时间" width="350">
					<template slot-scope="scope">{{scope.row.startDate}} 至 {{scope.row.deadline}}</template>
				</el-table-column>
				<el-table-column label="答题时间" width="100">
					<template slot-scope="scope">{{scope.row.time}} 分钟</template>
				</el-table-column>
				<el-table-column label="总分" width="100">
					<template slot-scope="scope">{{scope.row.totalScore}} 分</template>
				</el-table-column>
				<el-table-column label="是否公布答案" width="120">
					<template slot-scope="scope">{{scope.row.publishAnswer == 1? '是':'否'}}</template>
				</el-table-column>
				<el-table-column label="是否公布分数" width="120">
					<template slot-scope="scope">{{scope.row.publishScore == 1? '是':'否'}}</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="80"> </el-table-column>
				<el-table-column prop="operate" label="操作" :width="300">
					<template slot-scope="scope">
						<div>
							<el-button type="primary" size="small" @click="testSituation(scope.row.examId)" plain>查看考试情况</el-button>
							<el-button type="info" size="small" @click="changeTestDate(scope.row)" plain>设置</el-button>
							<el-button type="danger" size="small" @click="cancelRelease(scope.row.examId)" plain>取消发布</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 其他班级成员表格 -->
		<div class="user_list table" v-if="tab_classes=='user_list'">
			<el-table :data="userData" style="width: 100%" v-loading="loading">
				<el-table-column label="用户id">
					<template slot-scope="scope">U{{scope.row.id}} </template>
				</el-table-column>
				<el-table-column prop="relaname" label="成员名称"> </el-table-column>
				<el-table-column label="加入时间">
					<template slot-scope="scope">{{scope.row.enterDate}} </template>
				</el-table-column>
				<el-table-column label="身份">
					<template slot-scope="scope">{{scope.row.position}} </template>
				</el-table-column>
				<el-table-column prop="operate" label="操作" width="300">
					<template slot-scope="scope" v-if="tab_classes=='user_list'">
						<el-button type="danger" size="small" @click="outUser(scope.row.id)" plain>踢出班级</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination background layout="total, prev, pager, next,jumper" @current-change="currentChange"
			 :current-page.sync="currentPage" :total="total" :page-size="pageSize" />
		</div>
		<!-- 修改试卷发布设置 -->
		<ReleaseUpdate ref="releaseUpdate" @success="getClassesTestPaper()" />
		<!-- 修改班级 -->
		<EditClasses ref="EditClasses" @success="getClassesData()" />
	</div>
</template>
<script>
	import axios from "@/utils/axiosutils.js"
	import ReleaseUpdate from "./ReleaseUpdate";
	import EditClasses from './EditClasses'
	export default {
		name: "ClassesSpace",
		components: {
			ReleaseUpdate,
			EditClasses
		},
		watch: {
			//监听params参数的变化
			$route: {
				handler() {
					this.Classes_id = this.$route.query.id;
					this.getClassesData();
				},
				deep: true,
			},
		},
		data() {
			return {
				Classes_id: "班级不存在",
				classesData: {}, //当前班级数据
				TestData: [], //试卷信息数据
				userData: [], //班级其他成员数据
				tab_classes: "test_list",
				// 分页
				currentPage: 1,
				pageSize: 10,
				total: null,
				loading: false,
			};
		},
		async mounted() {
			this.Classes_id = this.$route.query.id;
			await this.getClassesData();
			await this.getClassesTestPaper();
		},
		methods: {
			//打开新页面
			goNewRouter(name) {
				const {
					href
				} = this.$router.resolve(name);
				window.open("/#/test", "_blank");
			},
			//获取班级信息
			getClassesData() {
				this.loading = true
				setTimeout(() => {
					axios.get("classes/queryClasses", resp => {
						this.classesData = resp.obj;
						this.loading = false
					}, {
						classesId: this.$route.query.id
					})
				}, 400);
			},
			//获取班级成员信息
			getClassesMembers() {
				this.loading = true
				let params = {
					c_id: this.$route.query.id,
					pageSize: this.pageSize,
					currentPage: this.currentPage,
				};
				setTimeout(() => {
					axios.get("classes/queryUserByC_id", res => {
						this.userData = res.obj.content;
						this.total = res.obj.total
						this.loading = false
					}, params)
				}, 500);
			},
			//获取班级试卷信息
			getClassesTestPaper() {
				this.loading = true
				setTimeout(() => {
					axios.get("exam/getExamByClasses", res => {
						var data = res.obj.content;
						//处理数据
						for (let i = 0; i < data.length; i++) {
							//判断考试是否结束
							var nowDate = new Date().getTime();
							var deadlineTime = new Date(data[i].deadline).getTime();
							var startDateTime = new Date(data[i].startDate).getTime();
							if (nowDate > deadlineTime) {
								data[i].status = "已结束";
							} else if (nowDate < startDateTime) {
								data[i].status = "未开始";
							} else {
								data[i].status = "进行中";
							}
						}
						this.TestData = data;
						this.total = res.obj.total
						this.loading = false
					}, {
						classesId: this.$route.query.id,
						pageSize: this.pageSize,
						currentPage: this.currentPage,
					})
				})
			},
			examList() {
				this.tab_classes = "test_list";
				this.currentPage = 1
				this.getClassesTestPaper()
			},
			userList() {
				this.tab_classes = "user_list";
				this.currentPage = 1
				this.getClassesMembers()
			},
			//修改班级信息
			editClasses() {
				this.$refs.EditClasses.dialog = true
				this.$refs.EditClasses.editClassesData = JSON.parse(JSON.stringify(this.classesData))
			},
			//把学生踢出班级
			outUser(u_id) {
				this.$confirm(" 这将会删除他所有与班级有关的信息", "是否确定删除学生?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "info",
				}).then(() => {
					// 处理post请求参数
					var params = {
						u_id: u_id,
						c_id: this.classesData.classesId,
					};
					axios.post("classes/outClassesByTeacher",resp=> {
						this.$message({
							message: "删除学生成功",
							type: "success"
						});
						this.getClassesMembers();
					},params);
				}).catch(() => {});
			},
			//更改考试设置
			changeTestDate(val) {
				this.$refs.releaseUpdate.changeTestDate(val, this.classesData.classesId);
			},
			// 查看考试情况
			testSituation(tp_id) {
				this.$router.push({name:'考试情况',query: {cId:this.Classes_id,tpId:tp_id}})
				
			},
			// 取消发布
			cancelRelease(tp_id) {
				this.$confirm("此操作将删除试卷在该班级的所有信息, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "info",
				}).then(() => {
					var params = {
						tp_id: tp_id,
						c_id: this.classesData.classesId,
					};
					axios.post("releaseExam/cancelRelease",resp=>{
						this.getClassesTestPaper();
						this.$message.success("已取消发布");
					},
						params
					);
				}).catch(() => {});
			},
			//开始考试
			openTestPaper(val) {
				var {
					href
				} = this.$router.resolve({
					name: "TestPaperStu",
					params: {
						tp_id: val.examId,
						c_id: this.classesData.classesId,
					},
				});
				window.open(href, "_blank");
			},
			//切换分页时触发
			currentChange(val) {
				this.currentPage = val;
				switch (this.tab_classes) {
					case 'test_list':
						this.getClassesTestPaper();
						break
					case 'user_list':
						this.getClassesMembers();
						break
				}
			},
		},
	};
</script>
<style lang="less" scoped>
	.classesSpace {
		padding: 10px 20px;

		.tab-classes {
			margin-left: 20px;
			margin-bottom: 10px;

			span {
				padding: 0 20px;
				font-size: 14px;
				cursor: pointer;
				border-right: 1px solid #333;
			}

			span:last-child {
				border: none;
			}

			span.active {
				font-size: 16px;
				font-weight: bold;
			}
		}

		.classesInfo {
			padding: 12px 24px;
			margin-bottom: 24px;
			border-radius: 4px;
			background: #fafafa;
			display: flex;

			.tital {
				width: 30%;

				h2 {
					margin-bottom: 10px;
				}

				.editClasses {
					cursor: pointer;
				}
			}

			.details {
				width: 70%;
			}

			ul {
				margin: 12px 0 16px;
				display: flex;
				align-items: center;
			}

			ul li {
				padding-right: 24px;
			}

			span.key {
				color: #606266;
			}
		}
	}
</style>
